<template>
  <div class="content-box" v-if="TrainingData" ref="contentBoxRef">
    <template v-for="item in TrainingData" :key="item.id">
      <div v-if="item.course_training_type_id == 1">
        <!-- 课程列表 -->
        <div class="content-box-item">
          <div class="content-box-item-title">
            {{ $t("content.profile.exam.course_title") }}
          </div>
          <div class="no-scrollbar scroll-x">
            <div class="table">
              <div class="table-header">
                <div class="table-header-item flex-1">
                  {{ $t("table.profile_exam.col_1") }}
                </div>
                <div class="table-header-item col-4">
                  {{ $t("table.profile_exam.col_2") }}
                </div>
                <div class="table-header-item col-4">
                  {{ $t("table.profile_exam.col_3") }}
                </div>
                <div class="table-header-item col-4">
                  {{ $t("table.profile_exam.col_4") }}
                </div>
                <div class="table-header-item col-2">
                  {{ $t("table.profile_exam.col_5") }}
                </div>
              </div>
              <div class="table-body">
                <template v-for="item in courseSubmitList" :key="item.id">
                  <div class="table-row">
                    <div class="table-row-item col-1 flex-1">
                      {{ item.list_title }}
                    </div>
                    <div class="table-row-item col-4">
                      {{ item.start_time }}
                    </div>
                    <div class="table-row-item col-4">
                      {{ item.middle_time }}
                    </div>
                    <div class="table-row-item col-4">{{ item.end_time }}</div>
                    <div class="table-row-item col-2">
                      {{ item.course_address_title }}
                    </div>
                  </div>
                </template>
              </div>
            </div>
          </div>
        </div>
        <!-- 成绩展示 -->
        <div class="content-box-item">
          <div class="content-box-item-title">
            {{ $t("content.profile.exam.score_title") }}
          </div>
          <div class="scores-list no-scrollbar scroll-x">
            <template
              v-for="(value, key, index) of courseScoreList"
              :key="index"
            >
              <div
                class="score-item none"
                v-if="isNaN(parseInt(value)) || parseInt(value) < 0"
              >
                <div class="score"></div>
                <div class="text">{{ key }}</div>
              </div>
              <div class="score-item" v-else-if="value >= 60">
                <div class="score">{{ value }}</div>
                <div class="text">{{ key }}</div>
              </div>
              <div class="score-item flunk" v-else>
                <div class="score">{{ value }}</div>
                <div class="text">{{ key }}</div>
              </div>
            </template>
          </div>
        </div>
        <!-- 补考 -->
        <div class="content-box-item">
          <div class="divider-line"></div>
          <div class="content-box-item-title">
            {{ $t("content.profile.exam.exam_title") }}
          </div>
          <div class="scores-list no-scrollbar scroll-x">
            <template
              v-for="(value, key, index) of buCourseScoreList"
              :key="index"
            >
              <div
                class="score-item none"
                v-if="isNaN(parseInt(value)) || parseInt(value) < 0"
              >
                <div class="score"></div>
                <div class="text">{{ key }}</div>
              </div>
              <div class="score-item" v-else-if="value >= 60">
                <div class="score">{{ value }}</div>
                <div class="text">{{ key }}</div>
              </div>
              <div class="score-item flunk" v-else>
                <div class="score">{{ value }}</div>
                <div class="text">{{ key }}</div>
              </div>
            </template>
          </div>
        </div>
      </div>
      <!-- 标题1 -->
      <div
        class="content-box-item other-box"
        v-if="item.course_training_type_id == 2 && item.keys == 0"
      >
        <div class="divider-line"></div>
        <div class="content-box-item-header">
          <div class="content-box-item-title">{{ item.title }}</div>
          <div class="content-box-item-btn" v-if="false">
            {{ $t("btnText.button") }}
          </div>
        </div>
        <div class="content-box-item-text" v-html="item.content"></div>
      </div>
      <!-- 标题2 -->
      <div
        class="content-box-item other-box"
        v-if="item.course_training_type_id == 2 && item.keys == 1"
      >
        <div class="divider-line"></div>
        <div class="content-box-item-header">
          <div class="content-box-item-title">{{ item.title }}</div>
          <div class="content-box-item-btn" v-if="false">
            {{ $t("btnText.button") }}
          </div>
        </div>
        <div class="content-box-item-text" v-html="item.content"></div>
      </div>
      <div class="download-list" v-if="item.course_training_type_id == 3">
        <div class="download-item" v-if="item.keys == 0">
          <svg
            class="file-icon"
            viewBox="0 0 24 24"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M21.0002 23.5502H6.60019C5.52324 23.5502 4.6502 22.6772 4.6502 21.6002V2.40024C4.6502 1.32329 5.52324 0.450244 6.6002 0.450244H16.2002C16.2729 0.450244 16.3427 0.47914 16.3941 0.530574L22.8699 7.00631C22.9213 7.05774 22.9502 7.1275 22.9502 7.20024V21.6002C22.9502 22.6772 22.0772 23.5502 21.0002 23.5502Z"
              fill="white"
              stroke="#D0D5DD"
              stroke-width="0.9"
            />
            <path
              d="M16.2002 0.300247V4.80025C16.2002 6.12573 17.2747 7.20025 18.6002 7.20025H23.1002"
              stroke="#D0D5DD"
              stroke-width="0.9"
            />
            <rect
              x="0.599609"
              y="10.9002"
              width="15.6"
              height="9.4"
              rx="1.2"
              fill="#D92D20"
            />
            <path
              d="M2.89879 18.1002V13.7366H4.62038C4.95135 13.7366 5.23331 13.7998 5.46626 13.9262C5.69922 14.0512 5.87678 14.2252 5.99893 14.4482C6.12251 14.6698 6.1843 14.9255 6.1843 15.2153C6.1843 15.5051 6.1218 15.7607 5.9968 15.9823C5.8718 16.2039 5.6907 16.3765 5.45348 16.5001C5.21768 16.6237 4.93217 16.6855 4.59695 16.6855H3.49964V15.9461H4.4478C4.62536 15.9461 4.77166 15.9156 4.88672 15.8545C5.0032 15.792 5.08984 15.7061 5.14666 15.5967C5.2049 15.4859 5.23402 15.3588 5.23402 15.2153C5.23402 15.0704 5.2049 14.944 5.14666 14.836C5.08984 14.7267 5.0032 14.6421 4.88672 14.5825C4.77024 14.5214 4.62251 14.4909 4.44354 14.4909H3.82138V18.1002H2.89879ZM8.33043 18.1002H6.78356V13.7366H8.34322C8.78214 13.7366 9.15998 13.824 9.47674 13.9987C9.7935 14.172 10.0371 14.4213 10.2076 14.7465C10.3794 15.0718 10.4654 15.461 10.4654 15.9142C10.4654 16.3687 10.3794 16.7593 10.2076 17.086C10.0371 17.4127 9.79208 17.6634 9.47248 17.8382C9.1543 18.0129 8.77362 18.1002 8.33043 18.1002ZM7.70614 17.3098H8.29208C8.56481 17.3098 8.79421 17.2615 8.98029 17.1649C9.16779 17.0669 9.30842 16.9156 9.40217 16.711C9.49734 16.5051 9.54492 16.2394 9.54492 15.9142C9.54492 15.5917 9.49734 15.3282 9.40217 15.1237C9.30842 14.9191 9.1685 14.7686 8.98242 14.672C8.79634 14.5754 8.56694 14.5271 8.29421 14.5271H7.70614V17.3098ZM11.1488 18.1002V13.7366H14.038V14.4973H12.0714V15.537H13.8462V16.2977H12.0714V18.1002H11.1488Z"
              fill="white"
            />
          </svg>
          <span class="file_name"
            >{{ item.title }}.{{ item.file_url_type.toLowerCase() }}</span
          >
          <svg
            class="download-icon"
            viewBox="0 0 20 20"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
            @click="downloadFileBtn(item.file_url)"
          >
            <path
              d="M17.5 12.5002V13.5002C17.5 14.9004 17.5 15.6004 17.2275 16.1352C16.9878 16.6056 16.6054 16.9881 16.135 17.2278C15.6002 17.5002 14.9001 17.5002 13.5 17.5002H6.5C5.09987 17.5002 4.3998 17.5002 3.86502 17.2278C3.39462 16.9881 3.01217 16.6056 2.77248 16.1352C2.5 15.6004 2.5 14.9004 2.5 13.5002V12.5002M14.1667 8.33358L10 12.5002M10 12.5002L5.83333 8.33358M10 12.5002V2.50024"
              stroke="#36434D"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>
        </div>
        <div class="download-item" v-if="item.keys == 1">
          <svg
            class="file-icon"
            viewBox="0 0 24 24"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M21.0002 23.5502H6.60019C5.52324 23.5502 4.6502 22.6772 4.6502 21.6002V2.40024C4.6502 1.32329 5.52324 0.450244 6.6002 0.450244H16.2002C16.2729 0.450244 16.3427 0.47914 16.3941 0.530574L22.8699 7.00631C22.9213 7.05774 22.9502 7.1275 22.9502 7.20024V21.6002C22.9502 22.6772 22.0772 23.5502 21.0002 23.5502Z"
              fill="white"
              stroke="#D0D5DD"
              stroke-width="0.9"
            />
            <path
              d="M16.2002 0.300247V4.80025C16.2002 6.12573 17.2747 7.20025 18.6002 7.20025H23.1002"
              stroke="#D0D5DD"
              stroke-width="0.9"
            />
            <rect
              x="0.599609"
              y="10.9002"
              width="15.6"
              height="9.4"
              rx="1.2"
              fill="#D92D20"
            />
            <path
              d="M2.89879 18.1002V13.7366H4.62038C4.95135 13.7366 5.23331 13.7998 5.46626 13.9262C5.69922 14.0512 5.87678 14.2252 5.99893 14.4482C6.12251 14.6698 6.1843 14.9255 6.1843 15.2153C6.1843 15.5051 6.1218 15.7607 5.9968 15.9823C5.8718 16.2039 5.6907 16.3765 5.45348 16.5001C5.21768 16.6237 4.93217 16.6855 4.59695 16.6855H3.49964V15.9461H4.4478C4.62536 15.9461 4.77166 15.9156 4.88672 15.8545C5.0032 15.792 5.08984 15.7061 5.14666 15.5967C5.2049 15.4859 5.23402 15.3588 5.23402 15.2153C5.23402 15.0704 5.2049 14.944 5.14666 14.836C5.08984 14.7267 5.0032 14.6421 4.88672 14.5825C4.77024 14.5214 4.62251 14.4909 4.44354 14.4909H3.82138V18.1002H2.89879ZM8.33043 18.1002H6.78356V13.7366H8.34322C8.78214 13.7366 9.15998 13.824 9.47674 13.9987C9.7935 14.172 10.0371 14.4213 10.2076 14.7465C10.3794 15.0718 10.4654 15.461 10.4654 15.9142C10.4654 16.3687 10.3794 16.7593 10.2076 17.086C10.0371 17.4127 9.79208 17.6634 9.47248 17.8382C9.1543 18.0129 8.77362 18.1002 8.33043 18.1002ZM7.70614 17.3098H8.29208C8.56481 17.3098 8.79421 17.2615 8.98029 17.1649C9.16779 17.0669 9.30842 16.9156 9.40217 16.711C9.49734 16.5051 9.54492 16.2394 9.54492 15.9142C9.54492 15.5917 9.49734 15.3282 9.40217 15.1237C9.30842 14.9191 9.1685 14.7686 8.98242 14.672C8.79634 14.5754 8.56694 14.5271 8.29421 14.5271H7.70614V17.3098ZM11.1488 18.1002V13.7366H14.038V14.4973H12.0714V15.537H13.8462V16.2977H12.0714V18.1002H11.1488Z"
              fill="white"
            />
          </svg>
          <span class="file_name"
            >{{ item.title }}.{{ item.file_url_type.toLowerCase() }}</span
          >
          <svg
            class="download-icon"
            viewBox="0 0 20 20"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M17.5 12.5002V13.5002C17.5 14.9004 17.5 15.6004 17.2275 16.1352C16.9878 16.6056 16.6054 16.9881 16.135 17.2278C15.6002 17.5002 14.9001 17.5002 13.5 17.5002H6.5C5.09987 17.5002 4.3998 17.5002 3.86502 17.2278C3.39462 16.9881 3.01217 16.6056 2.77248 16.1352C2.5 15.6004 2.5 14.9004 2.5 13.5002V12.5002M14.1667 8.33358L10 12.5002M10 12.5002L5.83333 8.33358M10 12.5002V2.50024"
              stroke="#36434D"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>
        </div>
      </div>
      <div class="excel-box" v-if="item.course_training_type_id == 5">
        <iframe
          v-if="item.excel_url"
          :src="
            'https://view.officeapps.live.com/op/view.aspx?src=' +
            item.excel_url
          "
          frameborder="0"
        ></iframe>
      </div>
      <!-- 上传图片 -->
      <div class="content-box-item" v-if="item.course_training_type_id == 4">
        <div class="divider-line"></div>
        <div class="content-box-item-title">{{ item.title }}</div>
        <UploadImg
          single
          size="small"
          :showIcon="false"
          :fileList="materialList"
        ></UploadImg>
      </div>
      <!-- 链接link -->
      <div class="content-box-item" v-if="item.course_training_type_id == 6">
        <div class="divider-line"></div>
        <div class="content-box-item-title">{{ item.title }}</div>
        <div class="content-link-input">
          <span>{{ $t("content.profile.exam.link_title") }}</span>
          <a-input
            :placeholder="$t('placeholder.profile_exam_link')"
            v-model:value="linkValue"
          ></a-input>
        </div>
      </div>
    </template>
  </div>
  <template v-else>
    <div class="skeleton-box">
      <div class="pc-skeleton">
        <div class="pc-skeleton-inner">
          <Skeleton width="30%" height="30px"></Skeleton>
          <Skeleton :rows="10"></Skeleton>
        </div>
      </div>
      <div class="mobile-skeleton">
        <Skeleton :rows="15" mobile></Skeleton>
      </div>
    </div>
  </template>
</template>

<script setup lang="ts">
import { inject, nextTick, onBeforeMount, ref, watch } from "vue";
import {
  postCourseSubmitList,
  postCourseSubmitScoreList,
  postTrainingList,
} from "../../../api/aviation";
import type {
  CourseSubmitListItem,
  CourseSubmitScoreItem,
  CourseSubmitTabItem,
  CourseTrainingListItem,
} from "../../../types/aviation";
import { useRuntimeConfig } from "nuxt/app";

const navActiveIndex = inject("navActiveIndex")!;
const courseSubmitTabList = inject("courseSubmitTabList")!;
const trainingId = inject("trainingId")!;
watch(courseSubmitTabList, (newVal: CourseSubmitTabItem[]) => {
  if (newVal && newVal.length) {
    let course_id = newVal[navActiveIndex.value].course_id;
    let course_ku_id = newVal[navActiveIndex.value].course_ku_id;
    getCourseSubmitListData({ course_id, course_ku_id });
    getCourseSubmitCoreList({ course_id, course_ku_id });
  }
});
watch(navActiveIndex, (newVal: number) => {
  let course_id = courseSubmitTabList.value[newVal].course_id;
  let course_ku_id = courseSubmitTabList.value[newVal].course_ku_id;
  getCourseSubmitListData({ course_id, course_ku_id });
  getCourseSubmitCoreList({ course_id, course_ku_id });
});

const config = useRuntimeConfig();
const TrainingData = ref<CourseTrainingListItem[]>();
const getExamContentData = async () => {
  let item = courseSubmitTabList.value[navActiveIndex.value]!;
  let course_id = item.course_id;
  let res = await postTrainingList(trainingId.value, course_id);
  if (res.code == 200) {
    TrainingData.value = res.data;
    handleImgContent();
  }
};
watch(
  trainingId,
  (newVal: number) => {
    if (trainingId.value != -1) {
      getExamContentData();
    }
  },
  { immediate: true }
);

// 处理图片没有后端地址前缀问题
const contentBoxRef = ref<HTMLElement | undefined>();
const handleImgContent = () => {
  nextTick(() => {
    let imgs = contentBoxRef.value?.querySelectorAll("img");
    imgs?.forEach((item) => {
      item.src = config.public.server_url + item.attributes._src.value;
    });
  });
};

type CourseParams = {
  course_id: number;
  course_ku_id: number;
};
const courseSubmitList = ref<CourseSubmitListItem[] | undefined>();
const getCourseSubmitListData = async (data: CourseParams) => {
  let res = await postCourseSubmitList(data);
  if (res.code === 200) {
    courseSubmitList.value = res.data;
  }
};

const courseScoreList = ref<Object>();
const buCourseScoreList = ref();
const materialList = ref();
const getCourseSubmitCoreList = async (data: CourseParams) => {
  let res = await postCourseSubmitScoreList(data);

  if (res.code === 200) {
    courseScoreList.value = res.data;
    let new_make_data: any = {};
    if (res.make_data) {
      let make_arrs = Object.keys(res.make_data);
      make_arrs.map((key) => {
        let value = res.make_data[key];
        if (value != -100) {
          new_make_data[key] = value;
        }
      });
    }
    buCourseScoreList.value = new_make_data;
    materialList.value = res.material;
  }
};

// 下载文件 =================================================================
const downloadFileBtn = (url: string) => {
  const link = document.createElement("a");
  link.href = url;
  link.download = true;
  link.target = "_blank";
  link.click();
};

onBeforeMount(() => {
  if (courseSubmitTabList.value) {
    let item = courseSubmitTabList.value[navActiveIndex.value]!;
    let course_id = item.course_id;
    let course_ku_id = item.course_ku_id;
    let parmas = {
      course_id,
      course_ku_id,
    };
    getCourseSubmitListData(parmas);
    getCourseSubmitCoreList(parmas);
  }
});
</script>
<style scoped lang="less">
@import url("../../../pages/profile/index/common.less");
.skeleton-box {
  margin-top: 24px;
  .pc-skeleton-inner {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
}

@media screen and (max-width: 768px) {
  .skeleton-box {
    margin-top: 123px;
  }
}

.excel-box {
  iframe {
    width: 100%;
    min-height: 800px;
  }
}
.content-box-item-text {
  & * {
    font-size: 14px !important;
  }
  color: #36434d;
  a {
    color: #428bf2;
  }
}
.content-box-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.content-box-item-btn {
  width: 52px;
  height: 32px;
  background: rgba(61, 136, 242, 0.1);
  border-radius: 10px 10px 10px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #3d88f2;
  cursor: pointer;
}
.download-list {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  .download-item {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #36434d;
    cursor: pointer;
  }
  .file_name {
    margin-left: 12px;
    margin-right: 8px;
  }
  .file-icon {
    width: 24px;
    height: 24px;
  }
  .download-icon {
    width: 20px;
    height: 20px;
  }
}
.content-link-input {
  display: flex;
  align-items: center;
  gap: 24px;
  span {
    font-size: 14px;
    color: #36434d;
    white-space: nowrap;
  }
  .ant-input {
    width: 541px;
    height: 40px;
    font-size: 14px;
    color: #36434d;
    padding: 10px 8px;
    border-radius: 10px;
  }
}

@media screen and (max-width: 768px) {
  .content-box-item-text {
    & * {
      font-size: 72px !important;
    }
    line-height: 123px;
  }
  .other-box {
    .content-box-item-header {
      margin-bottom: 123px;
      .content-box-item-title {
        margin-bottom: 0;
      }
    }
  }
  .content-box-item-btn {
    width: 266px;
    height: 164px;
    border-radius: 51px 51px 51px 51px;
    font-size: 72px;
  }
  .download-list {
    margin-top: 82px;
    gap: 61px;
    .download-item {
      font-size: 72px;
    }
    .file_name {
      margin-left: 61px;
      margin-right: 41px;
    }
    .file-icon {
      width: 123px;
      height: 123px;
    }
    .download-icon {
      width: 102px;
      height: 102px;
    }
  }
  .content-link-input {
    gap: 123px;
    span {
      font-size: 72px;
    }
    .ant-input {
      width: 100%;
      height: 205px;
      padding: 51px 41px;
      border-radius: 51px;
      font-size: 72px;
    }
  }
}
</style>
